<template>
    <div>
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :class="{disabled:fileComputed}" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="1"
            :file-list="fileList" :before-upload="beforeUpload" :http-request="upload" :on-change="onChange">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-progress v-if="showPercent" :percentage="percent" style="width:180px" />
    </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'

const cos = new COS({
    SecretId: 'AKIDznNjrkOmvpVv62i9LI2XnnY4LN9gy1pO',   // 身份识别 ID
    SecretKey: 'NWQ5UeYCblgLlwwhDUVv61h8KGxPcbLq'       // 身份密钥
})

export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            percent: 0,
            showPercent: false,
            currentFileUid: null
        };
    },
    methods: {
        handleRemove(file, fileList) {
            this.fileList = this.fileList.filter(item => item.uid !== file.uid)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        onChange(file, fileList) {
            this.fileList = fileList.map(item => item)
        },
        beforeUpload(file) {
            const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
            if (!types.includes(file.type)) {
                this.$message.error('上传图片只能为 JPG、GIF、PNG 格式')
                return false
            }
            const maxSize = 5 * 1024 * 1024     //5m
            if (file.size > maxSize) {
                this.$message.error('上传图片大小不能超过5m')
                return false
            }
            this.currentFileUid = file.uid
            this.showPercent = true
            return true
        },
        upload(params) {
            if (params.file) {
                cos.putObject({
                    Bucket: 'heimachuige-1302099167', /* 填入您自己的存储桶，必须字段 */
                    Region: 'ap-nanjing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
                    Key: 'params.file.name',  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
                    StorageClass: 'STANDARD',
                    Body: params.file, // 上传文件对象
                    onProgress: (progressData) => {
                        this.percent = progressData.percent * 100
                    }
                }, (err, data) => {
                    if (err) return this.$message.error('上传失败')
                    this.showPercent = false
                    this.percent = 0
                });
            }
        }
    },
    computed: {
        fileComputed() {
            return this.fileList.length === 1
        }
    }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none
}
</style>